<template>
    <div class="home" v-loading="loading">
        <PageHeader :secondary="secondary" :tabName="tabName"></PageHeader>
        <div class="homeTop">
            <h1>{{ formList.title }}</h1>
            <h3 v-if="formList.abstractText">{{ formList.abstractText }}</h3>
        </div>
        <div style=" display: flex;align-items: center;justify-content: space-between;">
            <p style="font-size: 14px;">
                <span>发布时间：{{ formList.createTime ? formList.createTime.substring(0, 10) : '' }}</span> &nbsp;
                <span>来源：{{ formList.authorName }}</span> &nbsp;
                <span v-if="formList.customInfoType">类型：{{ formList.customInfoType }}</span>
            </p>
            <el-button v-clipboard:copy="dialogImageUrl" v-clipboard:success="copySuccess">分享</el-button>
        </div>
        <div v-if="route.query.name == '逝者缅怀'" style="margin-bottom: 100px;text-align: center;">
            <figure v-for="(item, i) in attachList" :key="i">
                <div style="position:relative;">
                    <img :src="item.url" alt="" style="width:50%;    vertical-align: middle;">
                    <div class="animate__animated animate__backInUp" v-if="isShow">
                        <img class="sacrifice" src="../assets/sacrifice.svg" alt="">
                    </div>
                </div>
                <figcaption style="padding-top: 10px;font-size: 16px;    padding-bottom: 20px;">{{ formList.title }}
                </figcaption>
            </figure>
            <el-button style="color:red; background-color: #f7ccd1; border: 0;" @click="sacrifice()">祭祀</el-button>
        </div>
        <div class="editor" v-html="formList.content"></div>
        <div style="padding-top: 10px;" v-if="route.query.name != '逝者缅怀'">
            <div v-for="(item, i) in attachList" :key="i" style="padding:10px;text-align: left;">
                <span @click="lookBig(item.url)" class="looking">
                    <el-icon>
                        <Tickets />
                    </el-icon>{{ item.name }}
                </span>
            </div>
        </div>
    </div>
</template>

<script setup name='DetialInformation'>
import 'animate.css';
import { Tickets } from '@element-plus/icons-vue'
import PageHeader from '../components/PageHeader.vue'
import { GetArticleDetial, UploadSave } from '@/api/common'
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const localUrl = ref('http://192.168.0.202:80')
const formList = ref({})
const attachList = ref([])
const tabName = ref('')
const secondary = ref('')
const dialogImageUrl = ref(window.location.href)
const loading = ref(true)
const route = useRoute()
const getDetial = () => {
    loading.value = true
    GetArticleDetial(route.query.id).then((res) => {
        formList.value = res.data.data
        if (formList.value && formList.value.children.length != 0) {
            tabName.value = formList.value.children[0].name
            if (formList.value.children[1] && formList.value.children[1].name != '首页') {
                secondary.value = formList.value.children[1].name
            }
        }
        loading.value = false
    })
}
const isShow = ref(false)
const lookAttaches = () => {
    attachList.value = []
    const params = {
        fieldName: route.query.name
    }
    params.bussinessId = route.query.id
    UploadSave(params).then((res) => {
        res.data.data.map((item) => {
            attachList.value.unshift({ name: item.realName, url: localUrl.value + item.accessUrl, })
        })
    })
}
const sacrifice = () => {
    isShow.value = true
}
const lookBig = (url) => {
    window.open(url)
}
const copySuccess = () => {
    ElMessage({
        message: '分享链接已复制',
        type: 'success',
    })
}

onMounted(() => {
    getDetial()
    lookAttaches()
})
</script>

<style lang="scss" scoped>
.home {
    overflow: hidden;
    width: 65%;
    margin: 0 auto;
    min-height: calc(100vh - 521px);
    margin-bottom: 20px;

    .homeTop {
        width: 100%;
        border-bottom: 1px solid #dedcdc;
        padding: 40px 0 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        h1 {
            font-size: 28px;
            color: #F56C6C;
            margin: 0;
            text-align: center;
            width: 39%;
        }

        h3 {
            font-size: 24px;
            color: rgba(245, 108, 108, 0.6);
            padding-top: 30px;
            margin: 0;
            text-align: center;
        }
    }
}

.looking {
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.looking:hover {
    color: red;
}

.sacrifice {
    position: absolute;
    bottom: 0;
    z-index: 1000;
    width: 20%;
    left: 50%;
    transform: translateX(-50%);
    vertical-align: middle;
}

.animate__animated {
    --animate-duration: 2s;
    /* 持续时间 */
}

.isMobileShow {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 100000;
    background-color: #000
}

:deep table {
    border-collapse: collapse;
    border: 1px solid #ddd;
}

:deep table th,
:deep table td {
    border: 1px solid #ddd;
    padding: 10px;
}

:deep blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
}

:deep blockquote p {
    padding: 10px 0;
}

:deep .editor {
    p {
        img {
            max-width: 100%;
        }
    }

    video {

        margin: 0 auto;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}

:deep code {
    background-color: #f5f2f0;
    ;
    border-radius: 3px;
    font-family: monospace;
    padding: 3px;
}
</style>